<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main style="margin: 0 auto;">
        <div>
          <i class="el-icon-s-tools" style="font-size: 40px;margin-left: 20px;"></i>
          <el-tag type="danger" style="margin-left: 90px;font-size: 20px;margin-bottom: 20px;">耗费数量</el-tag>
          <br />
          <el-radio v-model="radio1" label="1" border>钢材板</el-radio>
          <el-input-number v-model="num1" @change="handleChange1" :min="1" :max="10" label="耗料"
            v-show="radio1==1?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio1==1?true:false">单位kg</el-tag>
          <br />
          <el-radio v-model="radio2" label="2" border>锯材堆</el-radio>
          <el-input-number v-model="num2" @change="handleChange2" :min="1" :max="10" label="耗料"
            v-show="radio2==2?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio2==2?true:false">单位kg</el-tag><br />
          <el-radio v-model="radio3" label="3" border>石膏板</el-radio>
          <el-input-number v-model="num3" @change="handleChange3" :min="1" :max="10" label="耗料"
            v-show="radio3==3?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio3==3?true:false">单位kg</el-tag>
          <br />
          <el-radio v-model="radio4" label="4" border>防火板</el-radio>
          <el-input-number v-model="num4" @change="handleChange4" :min="1" :max="10" label="耗料"
            v-show="radio4==4?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio4==4?true:false">单位kg</el-tag><br />
          <el-radio v-model="radio5" label="5" border>大灯片</el-radio>
          <el-input-number v-model="num5" @change="handleChange5" :min="1" :max="10" label="耗料"
            v-show="radio5==5?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio5==5?true:false">单位kg</el-tag><br />
          <el-radio v-model="radio6" label="6" border>螺丝钉</el-radio>
          <el-input-number v-model="num6" @change="handleChange6" :min="1" :max="10" label="耗料"
            v-show="radio6==6?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio6==6?true:false">单位kg</el-tag><br />
          <el-radio v-model="radio7" label="7" border>定门器</el-radio>
          <el-input-number v-model="num7" @change="handleChange7" :min="1" :max="10" label="耗料"
            v-show="radio7==7?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio7==7?true:false">单位kg</el-tag><br />
          <el-radio v-model="radio8" label="8" border>玻璃胶</el-radio>
          <el-input-number v-model="num8" @change="handleChange8" :min="1" :max="10" label="耗料"
            v-show="radio8==8?true:false" style="margin-left: 30px;"></el-input-number>
          <el-tag type="success" style="margin-left: 10px;" v-show="radio8==8?true:false">单位kg</el-tag><br />
        </div>
        <div style="margin-top: -150px;margin-left: 500px;">
          <el-upload action="http://localhost:8888/repairAttachment/upload" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-success="success" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <el-button type="danger" plain @click="agin()" style="margin-top: 20px;">点错了,重新来过</el-button>
        <el-button type="warning" plain @click="commit()" style="margin-top: 20px;">提交</el-button>
      </el-main>
    </el-container>

  </div>
</template>

<script>
  export default {
    name: "meterial",
    data() {
      return {
        radio1: '',
        radio2: '',
        radio3: '',
        radio4: '',
        radio5: '',
        radio6: '',
        radio7: '',
        radio8: '',
        num1: '',
        num2: '',
        num3: '',
        num4: '',
        num5: '',
        num6: '',
        num7: '',
        num8: '',
        materals: [],
        //文件上传
        dialogImageUrl: '',
        dialogVisible: false,
        //oss地址
        ossurl: "",
        repairNum:"",
        material:{
          repairNum:'',
          ramterials:[],
          img:''
        }
      }
    },
    methods: {
      // this.materals.push({"id":this.radio1,"num":num})
      handleChange1(num) {
        this.num1 = num
      },
      handleChange2(num) {
        this.num2 = num
      },
      handleChange3(num) {
        this.num3 = num
      },
      handleChange4(num) {
        this.num4 = num
      },
      handleChange5(num) {
        this.num5 = num
      },
      handleChange6(num) {
        this.num6 = num
      },
      handleChange7(num) {
        this.num7 = num
      },
      handleChange8(num) {
        this.num8 = num
      },
      //文件上传方法
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      success(response, file, fileList) {
        console.log(response)
        this.ossurl = response.data
        console.log(this.ossurl)
      },

      commit() {
        if (this.radio1 == 1) {
          this.materals.push({
            "dictCode": this.radio1,
            "count": this.num1,

          })
        }
        if (this.radio2 == 2) {
          this.materals.push({
            "dictCode": this.radio2,
            "count": this.num2,

          })
        }
        if (this.radio3 == 3) {
          this.materals.push({
            "dictCode": this.radio3,
            "count": this.num3,

          })
        }
        if (this.radio4 == 4) {
          this.materals.push({
            "dictCode": this.radio4,
            "count": this.num4,

          })
        }
        if (this.radio5 == 5) {
          this.materals.push({
            "dictCode": this.radio5,
            "count": this.num5,

          })
        }
        if (this.radio6 == 6) {
          this.materals.push({
            "dictCode": this.radio6,
            "count": this.num6,

          })
        }
        if (this.radio7 == 7) {
          this.materals.push({
            "dictCode": this.radio7,
            "count": this.num7,

          })
        }
        if (this.radio8 == 8) {
          this.materals.push({
            "dictCode": this.radio8,
            "count": this.num8,

          })
        }
        console.log(this.materals)
        this.material.repairNum="aa",
        this.material.ramterials=this.materals,
        this.material.img=this.ossurl
       console.log(this.material)
      },
      agin() {
        this.radio1 = ''
        this.radio2 = ''
        this.radio3 = ''
        this.radio4 = ''
        this.radio5 = ''
        this.radio6 = ''
        this.radio7 = ''
        this.radio8 = ''
        this.num1=''
        this.num2=''
        this.num3=''
        this.num4=''
        this.num5=''
        this.num6=''
        this.num7=''
        this.num8=''
        this.materals=[]
        console.log(this.material)
      }
    },
    created() {
    }
  }
</script>

<style>
</style>
